<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="../../jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    
    google.load('visualization', '1', {packages: ['table']});

    var DATA_SOURCE_URL = "https://docs.google.com/spreadsheet/ccc?key=0AsQK4ViswXzydHJQQ1dYSGJqYVJOSUg5OEJ2b1NGd1E&gid=2";
    
    jQuery(document).ready(function(){    
    	
    	$("#table").hide();

	    var query = new google.visualization.Query(DATA_SOURCE_URL);
	    query.setQuery('select B, C, D order by B');
	    query.send(handleQueryResponse); 	    

    });

    
    function handleQueryResponse(response) {

      if (response.isError()) {

        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());

        return;

      }

      var data = response.getDataTable();
      /*
      var group = google.visualization.data.group(
    		  data,
    		  [0],
    		  [{'column': 1, 'aggregation': google.visualization.data.count, 'type': 'number'}]
    		);
      */
	  visualization = new google.visualization.Table(document.getElementById('table'));

	  visualization.draw(data, {'allowHtml': true});
	  
	  // start post processing
	  $("tr.google-visualization-table-tr-even, tr.google-visualization-table-tr-odd")
	  		.addClass("datarow");
	  
	  var prev = ""
	  $("tr.datarow").each(function(i, item){
		  var group = $(this).find("td").eq(0).text();
		  if(prev != group) {
		  	$("#group").append("<option>" + group + "</option>");
		  	prev = group;
		  }
	  });
	  
	  // register action handler
	  $("#group").change(function() {
		 var selected =  $("#group option:selected").text();
		 
		 renderList(selected);
		 
	  });
	  
	  var first = $("#group option").eq(0).text();
	  renderList(first);
	  
    } // end handle response

    function renderList(selected) {

		 $("#list").empty();

		  $("tr.datarow").each(function(i, item){
			  var group = $(this).find("td").eq(0).text();
			  if(selected == group) {
				var url = $(this).find("td").eq(2).text();
				var favicon = "http://g.etfv.co/" + url;
				var img = "<img src='" + favicon + "' height='20px'/>";
			  	$("#list").append("<tr><td> " + img + "</td><td><a href='" + url + "'>" + $(this).find("td").eq(1).text() + "</td></tr>");
			  }
		  });
    }


    </script>

  </head>



  <body>

    <div id="table"></div>
    <select id="group"></select>
    <table id="list">
    </table>

  </body>

</html>